CHAPTER 6 - Creating an HTML Layout Page
by Ibrahim Malluf
In Chapter 3, "Introducing the ActiveX Control Pad," we talked about the mechanics of the ActiveX Control Pad and its features. The Layout control was introduced along with an example Layout Control project that demonstrated the ActiveX Chart control. Here I present a little more detail Onthe Layout control. The Layout control will be distributed as part of the Internet Explorer 3.0 release version. It is an ActiveX Control that can be distributed to any browser that supports ActiveX controls. In the case of Netscape, ActiveX is not directly supported, but there is at least one add-on available that gives Netscape ActiveX compatibility, and thus Layout Control capability.The ActiveX Layout control gives you full two-dimensional layout capability for your Web pages. Within this control's area, you can place items wherever you desire using pixel granularity. It should be mentioned here that the Layout control is envisioned by Microsoft as an interim application of a preliminary specification approved by the World Wide Web Consortium(W3C). This new specification will include HTML extensions that will radically extend layout capabilities within your documents. For now though, the Layout Control is the tool for providing 2D layout in HTML pages. As currently implemented, the Layout Control requires that you place your 2D layout information in a separate file with an .ALX extension. This file is a text file that contains the layout information formatted in the W3C's preliminary syntax.
In this chapter you learn about the benefits of true 2-dimensional layout and design capabilities provided by the Layout control. You also see how to use the Script Wizard to manage VBScript development within this Layout Control. Finally, there is an application project that provides an example of using the Layout control and how to work around some of its limitaions.
Preliminary 2-D Layout Rules and Benefits
According to Microsoft, they are committed to supporting the final specification natively within the Microsoft Internet Explorer after the W3C standard is formalized. Microsoft also says that they will ensure that the HTML Layout Control format is compatible with future 2-D layout support, which will be incorporated directly into future releases of the Microsoft Internet Explorer. The advantages of this new specification include the following:
Creating and Populating the Layout
To use a Layout Control in your Web page document, you need to declare it as you would any other ActiveX control. Listing 6.1 shows a sample declaration of an ActiveX Layout control in a Web page document.
Listing 6.1 CHAPT6_01.HTMSample Declaration of an ActiveX Layout Control in a Web Page
Listing 6.2 NAVIGATOR.ALXThe 2-D Layout Code within an ALX File Specifying a TabStrip Control's Placement
Parts of a Layout Control Page
The <DIV> tag syntax is :
<DIV [ID=name] STYLE = "layout-style-attributes">
object-blocks
</DIV>
The ID part of the tag is an optional attribute that specifies the name given to that particular Layout control and is used by scripting to identify it. The style tag specifies the style attributes for a given Layout Control and are defined in Table 6.1.
Table 6.1 Style Attributes for <DIV> Tag
Attribute | Description |
LAYOUT | Must be defined as FIXED for a 2-D region |
HEIGHT | Specifies the height of the layout region in pixels |
WIDTH | Specifies the width of the layout region in pixels |
BACKGROUND | Specifies the background color of the layout region in HEX digits |
You can include any ActiveX control within your ALX file. This includes but is not limited to controls that implement the ActiveX Control '96 specification for windowless, transparent controls. One thing I should note however is that some ActiveX controls will require a developer's license for you to include and distribute them through your Web documents. The beta version of Internet Explorer that I am working with right now does not have the licensing mechanism in place and will not show any controls that require a license. This should be corrected by the time you are reading this book.
One thing I should note, however, is that some ActiveX controls, you will have to have require a developer's license for you to include and distribute them through your Web documents. The beta version of Internet Explorer that I am working with right now does not have the licensing mechanism in place and does not indicate which controls require a license. This should be corrected by the time you are reading this book.
How to Start a New Project
Fortunately, you do not have to hand edit these ALX files. You can produce them through the ActiveX Control Pad described in Chapter 3, "Introducing the ActiveX Control Pad." To create a new Layout control, you need merely select the New Layout Control from the Files menu of the ActiveX control menu as shown in Figure 6.1. This brings up a new ActiveX Layout control that is ready for your editing.
Select a New HTML Layout control from the menu of the ActiveX Control Pad.
Let us create a navigator tool that can act as a drop-in-place navigational object that is fully modifiable based on a given page context. The idea being presented here uses a Layout control that contains a TabStrip control and an ieLabel control. The number of displayed tabs will differ depending upon the modifications made by external sources such as the parent Web page, or even a Web page in another frame.
First we'll begin by create the new Layout Control, adding a tab control and ieLabel control, and arrange them as shown in Figure 6.2. The TabStrip is named tabNavigator, and the label is simply named ieLabel. The TabStrip's TabOrientation property is set to left, and the ielabel's angle property is set to 90 degrees. Finally, add a ieTimer control that will drive some animation effects to be added later. Save the control with the name of Navigator.alx.
Begin the Navigator Demo project within the ActiveX Control Pad.
So altogether there are three controls on the Layout Pad. The ieLabel control in this beta version of the ActiveX Control Pad would not permit changing the FontName property from the Properties Edit Window. This is a bug that might or might not get fixed before you get an opportunity to read this book. The workaround for this and many similar problems is to directly edit the properties using the 'View Source Code' selection from the right button click's pop-up menu. This produces a NotePad-based edit window that enables you to do direct editing. Listing 6.3 shows the HTML code as presented by the View Source Code menu selection. Note that I changed the ieLabel's FontName to Brush Script MT.
Listing 6.3 NAVIGATOR.ALXThe Navigator's <DIV> Code Section in the ALX File with the Modified FontName Property of ieLabel
Code Management
The Script Wizard gives you very good control over the editing environment within a Layout control. All of the event code for your controls can be written through the Script Wizard using the Select Event and Insert Actions tree views. You can even add non-event procedures and Global variables through the Script Wizard as well.
Figure 6.3 shows the pop-up menu that appears when right-clicking the Procedures node in the Insert Actions tree view. When selecting a New Procedure from this menu, the Script Wizard opens a Code window to that procedure with the default name of Sub Procedure1In this situation a Function is desired instead of a sub procedure. Left-click the mouse button into the area where the procedure name is and edit the text there to say "Function NewColor." This function will be used to return a number representing a randomly generated color. It will be called by the ieTimer_timer event to provide a little bit of animation.
Add code to the Change event of the tabNavigator tabstrip.
To add functionality to a control's event procedure, just select the correct event from a control node in the Select Event window of the Script Wizard. Figure 6.4 shows the tabNavigator_Change event selected and the appropriate code being added to the event.
Edit the code in a Procedure through the Script Wizard.
Let's get down to the code required to build this drop-in-place navigator tool. Listing 6.4 includes three event procedures and one utility procedure. The utility procedure is a function that returns a randomly generated number. The ieTimer_Timer event calls a function that randomly generates a new number for the ieBanner label's text. The tabNavigator_Change event calls a ChangedTab procedure in the parent document.
Listing 6.4 NAVIGATOR.ALXThe VBScript Code within the HTML Layout Control for the Events and Methods of the Navigator.ALX Demo
The Navigator_OnLoad event contains special code to deal with some vagaries of the relationship between a parent document and the ALX file. There are some very tricky timing issues involved with the Layout Control and the parent document's VBScript. In the case of this Navigator project I wanted to be able to have the parent document determine how many tabs would be needed, what those tabs' titles would be, and finally what would happen when those tabs where selected.
The problem here had to do with the way the VBScript would be parsed by Explorer. In order to have the parent document's VBScript recognize the Navigator Layout control I had to use the OnLoad ="InitALX" event in the VBScript of the parent document. This will cause the Navigator to get loaded before the VBScript is parsed thus avoiding parsing errors when the parser came upon references to the navigator. The caveat here was that none of the Parent Document's VBScript code could be run outside of a procedure or a parser error would occur anyway. So I had to have a way to invoke the parent document's VBScript code that would populate the tabstrip with data. The Navigator's OnLoad event did the trick. Since the ALX code apparently gets parsed while loading, and this particular event wouldn't occur until the Navigator was loaded all the timing issues of the parser were resolved.
The OnLoad event of the Navigator called back to the parent document's VBSCript procedure that loaded the tabstrip with the data. This problem is purely an initialization problem. Once the parent document has completed loading, the Navigator's data can be manipulated from other frames as needed.
The Navigator Demo created here has a set of requirements in order to run. They are:
You can modify the Navigator to have different requirements depending upon your needs but as it is presented here these are the things it needs to work To build and test your Layout Controls you need to have one or more Web page documents to create the environment needed for your layout control project. In my case here I needed three documents:
The code for Chapt6_00.htm includes the definition of three frames that have no borders and are not sizable. Listing 6.5 shows the code for this page. You won't find any rocket science there.
Listing 6.5 CHAPT6_00.HTMThe Layout HTML for the Required Frames
Listing 6.6 MYBANNER.HTMA Fancy Banner to Fill Frame 0 in the Navigator Demo
Listing 6.7 CHAPT6_01.HTMThe Layout HTML code for the Navigator Page
Listing 6.8 CHAPT6_01.HTMThe Procedures for Setting Up and Responding to the Navigator Layout Control
Here's the Navigator Layout control in action.
By clicking any of the tabs of the Navigator control you can cause the indicated Web page to be loaded into the main window of the frameset. Customizing this navigator during runtime is accomplished through the modification of the value in the MyTabs hidden value and the values in the NameTabs Sub procedure to match your location titles and URLs.
From Here...
Try experimenting with the Navigator concept such as having pages that are loaded into the main frame dynamically change the Navigator's tabs and locations data.